<template>
  <div class="m-search">
    <el-input
      :placeholder="$t('home.keyword')"
      v-model="Value"
      class="input-with-select search-input"
      size="medium"
      @keyup.enter.native="search"
    >
      <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
    </el-input>
  </div>
</template>

<script>
import searchBase from "@/mixins/search.js";
export default {
  mixins: [searchBase]
};
</script>

<style lang="scss">
.m-search {
  margin-top: 15px;
  text-align: center;
  .search-input {
    width: 342px;
    height: 38px;
    .el-input__inner {
      height: 38px;
      border: 1px solid #dee1e6;
      border-top-left-radius: 25px;
      border-bottom-left-radius: 25px;
    }
    .el-input-group__append {
      border-top-right-radius: 25px;
      border-bottom-right-radius: 25px;
      background: $blue;
      color: $white;
      transition: 0.3s;
    }
    .el-input-group__append:hover {
      opacity: 0.8;
    }
    .el-input-group__append:active {
      opacity: 1;
    }
  }
}
</style>